<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("li").css("list-style","none");
				$("ul li").hover(function(){
					$(this).css("color","red");
				},function(){
					$(this).css("color","black");
				});
				var d=$("ul li");
				alert(d.length);
				
				//d.css("font-size","50px");
				//字体越来越来,后一个比前一个大10px
				var oldSize=d.css("font-size");
				alert(oldSize);
				var size=parseInt(oldSize);
				$.each(d,function(i,o){//i表示第几个,o表示循环中的元素,是dom元素
					//this
					$(o).css("font-size",size*(i+1)+"px");
				});
				// for(let o of d){
				// 	//alert(o);
				// 	//alert(o.innerHTML);
				// 	$(o).css("font-size",size+"px");
				// 	size+=10;
				// }
			});
		</script>
	</head>

	<body>
		<ul>
			<li>葡萄</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>柿子</li>
			<li class="bo">菠萝</li>
			<li>桃子</li>
			<li>苹果</li>
			<li>西瓜</li>
			<li>萝卜</li>
		</ul>
	</body>

</html>
